import React from 'react';
import { List } from 'antd';
import styles from 'style.less';

export interface CardData {
  _id: string;
  name: string;
}

interface CardListProps {
  list: CardData[];
}

const CardItem: React.FC<{ data: CardData }> = ({ data }) => {
  const { _id, name } = data;

  return (
    <div key={_id}>
      <h1>{name}</h1>
    </div>
  );
};

const CardList: React.FC<CardListProps> = ({ list }) => {
  return (
    <List
      bordered
      size="small"
      dataSource={list}
      renderItem={item => <List.Item><CardItem data={item} /></List.Item>}
    />
  );
};

export default CardList;
